<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
	.container{width: 100px;
	           margin: 20px auto;
	       	   }
	#nav{border: 1px solid #ccc;
		 
	     border-radius: 5px;
	     height: 50px;
	     text-align: center;
	     line-height: 50px;
	     cursor:pointer;}
	#nav:hover{background: #eee;
	           }
	#list{width: 100px;
		 border: 1px solid #ccc;
		 border-radius: 5px;
		 cursor:pointer;
		 display: none;
		list-style: none;
	    }
	li{ display: block;
	   height: 50px;
	   text-align: center;
	   line-height: 50px;}
	li:hover{background:#eee;}

		
	</style>
	
</head>
<body>
	<nav class="container">
		<div id="nav">dropDown</div>
		<ul id="list">
			<li id="list1" onclick="get('list1')">第一个</li>
			<li id="list2" onclick="get('list2')">第二个</li>
			<li id="list3" onclick="get('list3')">第三个</li>
		</ul>
	</nav>
</body>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id)
		}
		$('nav').setoff=false;
		$('nav').onclick=function(){
			
			if (this.setoff==false){
				$('list').style.display='block';
				this.setoff=true;
			}
			else{$('list').style.display='none';
				this.setoff=false;}
			
		}
		  function get(listId){
		 	$('nav').innerHTML=$(listId).innerHTML;
		 	$('list').style.display='none';
		 }

		/*$('list1').onclick=function(){
			$('nav').innerHTML=$('list1').innerHTML;
			$('list').style.display='none'
		}
		$('list2').onclick=function(){
			$('nav').innerHTML=$('list2').innerHTML;
			$('list').style.display='none';
		}
		$('list3').onclick=function(){
			$('nav').innerHTML=$('list3').innerHTML;
			$('list').style.display='none';
		}*/

	</script>
</html>